<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员信息</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>
<body>

<style>
    .userinfo {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
    }

    .userinfo .user-avatar-box {
        position: relative;
        cursor: pointer;
    }

    .userinfo .user-avatar {
        display: block;
        width: 100px;
        border-radius: 50%;
        border: 1px solid #f2f6fc;
    }

    .userinfo .user-avatar-gender {
        position: absolute;
        bottom: 0;
        right: 10px;
        height: 22px;
        width: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);;
    }

    .userinfo .username {
        display: block;
        text-align: center;
        width: 100%;
        padding-top: 10px;
        font-size: 18px;
        font-weight: 700;
    }

    .userinfo .user-integral {
        display: block;
        text-align: center;
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
    }

    .userinfo .user-integral span {
        padding: 0 4px;
    }

    .userinfo .userinfo-buttons {
        margin-top: 10px;
    }

    .layui-form-item-required:before {
        display: inline-block;
        margin-right: 4px;
        color: #f5222d;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: "*";
    }

    .login {
        padding: 15px
    }

    .loginfrom .layui-form-label {
        width: 100%;
        float: inherit;
        text-align: left;
        padding-left: 0px
    }

    .loginfrom .layui-input-block {
        margin-left: 0px;
    }

    .login .layui-btn-container i {
        display: block
    }

    .login .layui-btn-container .layui-btn {
        width: 60px;
        height: 60px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        padding-top: 10px;
    }

    .login .layui-tab-title {
        height: 49px
    }

    .login .layui-tab-title .layui-this:after {
        height: 50px;
        border-bottom: 3px solid #004BFF;
    }

    .login .layui-tab-title .layui-this {
        font-weight: bold;
        color: #004BFF
    }

    .login .layui-tab-title li {
        line-height: 46px;
        font-size: 16px;
        color: #333;
        padding: 0px;
        margin-right: 35px;
    }

    .login .login_con {
        padding: 20px 25px 20px 25px;
    }

    .login_container {
        display: none
    }
</style>
<div class="view_body"></div>
<script type="text/html" id="view_body_data">
    <div class="login">
        {{# if(d.id){ }}

        <div class="userinfo">
            <div class="user-avatar-box">
                <img class="user-avatar" src="{{d.avatar || '/static/img/avatar.png'}}">
            </div>
            <p class="username">{{d.user}}</p>
            <p class="user-integral"><span>积分 {{d.integral || '0.00'}}</span><span>余额  {{d.balance || '0.00'}}</span>
            </p>
            <div class="userinfo-buttons">
                <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="inUser()">会员中心</button>
                <button class="pear-btn pear-btn-sm btn_theme_2" style="margin-left: 12px" onclick="loginOut()">注销登录</button>
            </div>
        </div>

        {{# } else { }}

        <div class="login_con">
            <div style="margin:5px 0 25px 0;font-size: 20px; font-weight: bold; text-align: center">登录RuiNuo低代码</div>
            <div style="margin:5px 0 15px 0;" class="loginfrom">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">账号密码登录</li>
                        <li>手机登录</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form LoginData" action="" method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-item-required">账号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="u_name" lay-verify="required" autocomplete="off"
                                               placeholder="用户名/邮箱/手机号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-item-required">密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="u_pass" lay-verify="required" autocomplete="off"
                                               placeholder="密码" class="layui-input">
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                                        lay-filter="userLogin" style="background: #056de8"><i
                                        class="layui-icon layui-icon-ok"></i>立即登录
                                </button>
                            </form>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form PhoneData" action="" method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-item-required">手机号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="u_phone" lay-verify="required" autocomplete="off"
                                               placeholder="请输入你的手机号" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-item-required">验证码</label>
                                    <div class="layui-input-block" style="position: relative">
                                        <input type="text" name="u_code" lay-verify="required" autocomplete="off"
                                               placeholder="请输入6位数字" class="layui-input" maxlength="6">
                                        <button type="button" class="layui-btn layui-btn-normal phonebutton"
                                                style="position: absolute; right: 0px; top: 0px" onclick="phoneCode();">
                                            发送验证码
                                        </button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                                        lay-filter="phoneLogin" style="background: #056de8"><i
                                        class="layui-icon layui-icon-ok"></i>立即登录
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{# } }}
    </div>
</script>
<script>
    let shopUrl='{:GetConfig('system','shop_url')}';
</script>
<script src="/static/js/common/shop/config.js?t={:time()}"></script>
<script src="/static/js/common/shop/userinfo.js?t={:time()}"></script>
</body>
</html>